<%--
  Created by IntelliJ IDEA.
  User: LnDamowang
  Date: 2019-01-02
  Time: 8:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>油卡列表</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <script>

        function searcha() {
            //返回表格的 Options。
            var opts = $("#oilTable").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var name = $("#gname").val() ;
            $.post("/oilCard/querySearch",{'name':name,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                // alert(data)
                $("#oilTable").bootstrapTable('load',data) ;
            })
        }
        $(function () {
            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
           $("#oilTable").bootstrapTable({
               url:'${pageContext.request.contextPath}/oilCard/querySearch',
               height:480,
               pageSize:2,
               pageList:[2,4,8,16],
               detailView:true,
               // pagination:true,
               toolbar :'#tool',
               pageNumber:1,
               //启用分页，但是默认情况下，是客户端分页的
               pagination:true,
               // //启用服务器端分页
               sidePagination:'server',
               // //设置 true 将禁止多选。
               singleSelect:false,
               queryParams:function(params){
                   var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                       limit: params.limit,  //页面大小
                       offset: params.offset, //页码
                       name:$("#gname").val()
                   };
                   return temp;
               },
               columns:[
                   {
                       checkbox:true
                   },
                   {
                       field:'id',
                       title:'编号'
                   },
                   {
                       field:'cardId',
                       title:'卡号'
                   },
                   {
                       field:'handleDate',
                       title:'开卡日期'
                   },
                   {
                       field:'balance',
                       title:'余额'
                   },
                   {
                       field:'amount',
                       title:'充值总金额（共）'
                   },
                   {
                       field:'userinfo.uname',
                       title:'操作人'
                   },
                   {
                       title:'操作',
                       formatter:function(value,row,index) {
                           return "<button class='btn  btn-primary' onclick='chongzhi("+row.id+")'><span class='glyphicon glyphicon-pencil'></span>&nbsp;充值</button>"
                       }
                   }
               ]
           });
        });
        //添加
        function toadd() {
            var optionStr="";
            var list="";
            $.ajax({
               "url":"${pageContext.request.contextPath}/oilCard/toadd",
                "type":"post",
                "success":function (date) {
                   for (var i=0;i<date.length;i++){
                       optionStr = optionStr+ '<option value="'+date[i].uid+'">'+date[i].uname+'</option>';
                       $("#operator").html(optionStr);
                       $("#addModel").modal("show");
                   }
                }
            });
        }
        function doadd() {
            var options = $("#oilTable").bootstrapTable('getOptions');
            //得到当前页
            var pn = options.pageNumber;
            $("input[name='pn']").val(pn);
            var formStr = $('#addform').serialize();
            //处理表单控件的中文乱码
            params = decodeURIComponent(formStr, true);
            alert(params)
            $.ajax({
                'type': 'post',
                'url': '${pageContext.request.contextPath}/oilCard/save',
                'data': params,
                success: function (date) {
                    //关闭对话框
                    $("#addModel").modal('hide');
                    //重新加载表格
                    $("#oilTable").bootstrapTable('load',date);
                    //提示增加成功
                    swal("提示信息", "增加成功!", "success");
                }
            })
        }

        //充值
        function chongzhi(id) {
            //取消所有选择
            $("#oilTable").bootstrapTable("uncheckAll");
            $("input[name='id']").val(id);

            var options = $("#oilTable").bootstrapTable('getOptions');
            //得到当前页
            var pn = options.pageNumber;
            $("input[name='pn']").val(pn);
            $("#chongzhiModel").modal("show");
            $("#chongzhiModel").on("shown.bs.modal",function (){
                $('#czfrom').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        balance: {
                            message: 'The balance is not valid',
                            validators: {
                                notEmpty: {
                                    message: '金额不能为空！'
                                },
                                stringLength: {
                                    min: 2,
                                    max: 10,
                                    message: '请输入10元以上金额'
                                },
                                regexp: {
                                    regexp: /^([0-9]+)$/,
                                    message: '请输入正确金额'
                                }
                            }
                        },
                    }
                });
            })
            // $("chongzhiMode")
        }
        function dochongzhi() {
            //启用较验
            $('#czfrom').data('bootstrapValidator').validate();
            //验证是否通过true/false
            var flag = $('#czfrom').data('bootstrapValidator').isValid();
            if(flag){ var balance = $("#balance1").val();
                var id =  $("input[name='id']").val();
                var pn = $("input[name='pn']").val();

                $.post("${pageContext.request.contextPath}/oilCard/chongzhi",{"balance":balance,"id":id,"pn":pn},function (date) {
                    //关闭对话框
                    $("#chongzhiModel").modal('hide');
                    //重新加载表格
                    $("#oilTable").bootstrapTable('load',date);
                    //提示增加成功
                    swal("提示信息", "增加成功!", "success");
                } );
            }
        }
    </script>
</head>
<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">商品列表</h3>
        </div>
        <div class="panel-body">
            <div class="col-sm-6">
                <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                <button onclick="del()" class="btn btn-primary"><span class="glyphicon glyphicon-trash" ></span>&nbsp;&nbsp;删除</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="gname" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
            <table id="oilTable"></table>
        </div>
    </div>
    <%--添加油卡--%>
    <div class="modal fade" id="addModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">添加油卡</h4>
                </div>
                <div class="modal-body">
                    <form id="addform" method="post" class="form-horizontal">
                        <input type="hidden" name="pn">
                        <div class="panel-body">
                            <input type="hidden" class="pn">
                            <div class="form-group">
                                <label class="col-sm-4 text-right  control-label" for="cardId">油卡号</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="cardId" name="cardId"  placeholder="油卡号" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right">开卡日期</label>
                                <div class="col-sm-6">
                                    <div class="input-group" id="datetimepicker1">
                                        <input name="handleDate" type='text' class="form-control" />
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right  control-label" for="balance">充值金额</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="balance" name="balance"  placeholder="充值金额" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 text-right  control-label" for="operator">操作人</label>
                                <div class="col-sm-6">
                                    <select name="operator"  class="form-control" id="operator">

                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="doadd()" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <%--充值金额--%>
    <div class="modal fade" id="chongzhiModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" id="czfrom">
                        <input type="hidden" name="id">
                        <input type="hidden" name="pn">
                        <div class="form-group">
                            <label class="col-sm-4 text-right  control-label" for="balance1">金额</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="balance1" name="balance"  placeholder="金额/请输入正确金额" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="dochongzhi()" class="btn btn-primary">充值</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>
</html>
